<template>
  <NavBar title="续药提醒" :arrow="true" />
  <van-form @submit="onSubmit">
    <van-cell-group>
      <!-- 药品 -->
      <van-field
        v-model="medicineName"
        is-link
        readonly
        name="medicineName"
        label="药品"
        input-align="right"
        placeholder="请选择"
        @click="showMedicine = true"
        class="van_cell_padding"
      />
      <van-popup v-model:show="showMedicine" position="bottom" round>
        <div >
          <div class="search_box">
            <div class="title">药品名</div>
            <van-search
              v-model="key"
              placeholder="请输入药品名搜索"
              shape="round"
              @blur="searchMedicine"
              class="search_medicine"
            ></van-search>
          </div>
          <van-list
            v-model:loading="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="getList"
            class="medicine_list"
          >
            <div
              v-for="item in medicineList"
              :key="item.id"
              class="medicine_cell"
              @click="chooseMedicine(item)"
            >
              <img :src="item.url" alt="" />
              <div class="medicine_msg">
                <div class="medicine_name">{{ item.name }}</div>
                <div class="meddicine_factory">
                  生产厂家：{{ item.factory }}
                </div>
              </div>
            </div>
          </van-list>
        </div>
      </van-popup>
      <!-- 主治病症 -->
      <van-field
        v-model="mainDisease"
        name="main"
        label="主治病症"
        placeholder="请输入"
        input-align="right"
        class="van_cell_padding"
      />
      <!-- 药品用量 -->
      <van-field
        v-model="medicineNum"
        name="medicineNum"
        label="药品用量"
        placeholder="请输入"
        input-align="right"
        class="van_cell_padding"
      />
      <!-- 上次开药时间 -->
      <van-field
        v-model="lastDate"
        is-link
        readonly
        name="lastDate"
        label="上次开药时间"
        input-align="right"
        placeholder="请选择"
        @click="showLastDate = true"
        class="van_cell_padding"
      />
      <van-popup v-model:show="showLastDate" position="bottom" round>
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="confirmLastDate"
          @cancel="cancelLastDate"
        />
      </van-popup>
      <!-- 用药周期 -->
      <van-field name="stepper" label="用药周期(天)" input-align="right" class="van_cell_padding">
        <template #input>
          <van-stepper
            v-model="period"
            theme="round"
            button-size="14"
            disable-input
          />
        </template>
      </van-field>

      <!-- 续药提醒时间 -->
      <van-field
        v-model="nextDate"
        is-link
        readonly
        name="nextDate"
        label="续药提醒时间"
        input-align="right"
        placeholder="请选择"
        @click="showNextDate = true"
        class="van_cell_padding"
      />
      <van-popup v-model:show="showNextDate" position="bottom" round>
        <van-datetime-picker
          v-model="currentDate"
          type="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="confirmNextDate"
          @cancel="cancelNextDate"
        />
      </van-popup>
    </van-cell-group>
    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
  <TabBar />
</template>

<script>
import { medicineListData } from '@/views/user/mock.js'
import NavBar from '@/components/NavBar'
import TabBar from '@/components/TabBar'
import { onMounted, ref } from 'vue'
export default {
  components: {
    TabBar,
    NavBar,
  },
  setup() {
    /* 药品 */
    let medicineName = ref('')
    let showMedicine = ref(false)
    let medicineList = ref([])
    let loading = ref(false)
    let finished = ref(false)
    let num = 0
    let key = ref('')
    /* 获取药品名 */
    let getList = () => {
      setTimeout(() => {
        loading.value = true
        if (num + 5 < medicineListData.length) {
          for (let i = num; i < num + 5; i++) {
            medicineList.value.push(medicineListData[i])
          }
          num += 5
        } else {
          for (let i = num; i < medicineListData.length; i++) {
            medicineList.value.push(medicineListData[i])
          }
          finished.value = true
        }
        loading.value = false
      }, 1000)
    }
    /* 搜索药品 */
    let searchMedicine = () => {
      console.log(key.value)
      medicineList.value = medicineListData.filter((item) => {
        return item.name.indexOf(key.value) != -1
      })
      console.log(medicineList.value)
    }
    /* 选择药品 */
    let chooseMedicine = (item) => {
      medicineName.value = item.name
      showMedicine.value = false
    }
    /* 主治病症 */
    let mainDisease = ref('')
    /* 药品用量 */
    let medicineNum = ref('')
    /* 上次开药时间 */
    let lastDate = ref('')
    let showLastDate = ref(false)
    let currentDate = ref(new Date())
    let confirmLastDate = () => {
      lastDate.value = formatDate(currentDate.value)
      showLastDate.value = false
    }
    let cancelLastDate = () => {
      showLastDate.value = false
    }
    /* 用药周期天 */
    let period = ref(1)
    /* 续药提醒时间 */
    let nextDate = ref('')
    let showNextDate = ref(false)
    let confirmNextDate = () => {
      nextDate.value = formatDate(currentDate.value)
      showNextDate.value = false
    }
    let cancelNextDate = () => {
      showNextDate.value = false
    }

    onMounted(() => {
      getList()
    })
    let formatDate = (date) => {
      let y = date.getFullYear() //年
      let m = date.getMonth() + 1 //月
      m = m < 10 ? '0' + m : m //是否大于10
      let d = date.getDate() //日
      d = d < 10 ? '0' + d : d //是否大10
      let h = date.getHours() //小时
      let min = date.getMinutes() //分钟
      return y + '-' + m + '-' + d + ' ' + h + ':' + min //返回时间格式
    }
    let onSubmit = (value) => {
      console.log('submit', value)
    }
    return {
      chooseMedicine,
      medicineName,
      showMedicine,
      medicineList,
      getList,
      loading,
      finished,
      key,
      searchMedicine,
      mainDisease,
      medicineNum,
      showLastDate,
      minDate: new Date(2021, 0, 1),
      maxDate: new Date(2024, 11, 30),
      currentDate,
      confirmLastDate,
      cancelLastDate,
      lastDate,
      period,
      nextDate,
      showNextDate,
      confirmNextDate,
      cancelNextDate,
      onSubmit,
      formatDate,
    }
  },
}
</script>

<style lang="less" scoped>
.medicine_list{
  padding:0 15px;
}
.search_box {
  display: flex;
  align-items: center;
  height: 46.5px;
  border: 1.5px solid #e5e5e5;
  .title {
    font-size: 14px;
    font-weight: bold;
    color: #007afd;
    margin-left: 23.5px;
    margin-right: 2.5px;
  }
  /deep/.van-search{
    padding-top: 6px;
    padding-bottom: 5.5px;
  }
}
.medicine_cell {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
  img {
    width: 75px;
    height: 64px;
    margin-left: 10px;
    margin-right: 12px;
    border: 0.5px solid #e6e6e6;
    border-radius: 5px;
  }
  .medicine_msg {
    margin-top: 6.5px;
  }
  .medicine_name {
    font-size: 15px;
    font-weight: bold;
    color: #333333;
    margin-bottom: 20.5px;
  }
  .medicine_factory {
    font-size: 12px;
    font-weight: 500;
    color: #666666;
  }
}
/deep/ .van-list {
  height: 390px;
}
/deep/ .van-search {
  width: 281px;
}
/deep/ .van-stepper__plus {
  background: #007afd;
  color: #ffffff;
}
/deep/ .van-stepper__minus {
  color: #007afd;
  border: 1px solid #007afd;
  background: #ffffff;
}
/deep/ .van_cell_padding {
  padding-top: 13px;
  padding-bottom: 13px;
}
</style>
